﻿@using RuoVea.ExUtil;

@using Microsoft.Extensions.Options

@{
    ViewData["Title"] = "作业";
    string JobRootUrl = "";
    Layout = "";
}
<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewData["Title"] - MES管理系统</title>
    <link href="/elementui/index.css" rel="stylesheet" />
    <link href="/elementui/index.extend.css?v=22" rel="stylesheet" />
    <style scoped>


    </style>
</head>
<body>
    <div id="main" v-cloak style="width:600px;">
        @*    <el-extend-form :form-json="formJson" :submit="submitForm" :form-data="formData"></el-extend-form> *@
        <el-button type="primary" size="small" icon="el-icon-plus" @@click="footerVisible = true;dialogVisible=true;">新建任务</el-button>
        <el-button type="default" size="small" icon="el-icon-view" @@click="footerVisible = false;view();">查看</el-button>

        <el-button type="default" size="small" icon="el-icon-view" @@click="footerVisible = true;loadData();">初始化</el-button>

        <el-extend-form :form-json="formJson" :submit="submitForm" :form-data="formData" v-loading.fullscreen.lock="loading"
                        :dialog-width="dialogWidth" :dialog-visible="dialogVisible" :cancel="handleClose" :footer-visible="footerVisible"></el-extend-form>
    </div>

    <script type="text/javascript" src="/vue/vue.js?v=2.0"></script>
    <script type="text/javascript" src="/vue/vue-i18n.min.js?v=2.0"></script>
    <script type="text/javascript" src="/elementui/index.js"></script>
    <script type="text/javascript" src="/elementui/index.extend.js?v=@RuoVea.ExUtil.Time.Time.Now.GetTimeStamp()"></script>
    <script type="text/javascript" src="/vue/axios.min.js"></script>

    <script>
       

        var $taskVue = new Vue({
            el: "#main",
            data() {
                return {
                    dialogTitle:"",
                    dialogVisible: false,
                    footerVisible: true, 
                    dialogWidth: "30%",
                    buttonSize: "small",

                    loading: false,
                    formData: {},
                    formJson: [
                        {
                            type: 'input',
                            label: '大大姓名',
                            prop: 'name',
                            default: '', // 默认值为空字符串
                            rules: [{ required: true, message: '姓名不能为空', trigger: 'blur' }]
                        },
                        {
                            type: 'select',
                            label: '性别',
                            prop: 'gender', default: null, // 对于选择类型，默认值可以设置为 null
                            options: [
                                { label: '男', value: 'male' },
                                { label: '女', value: 'female' }
                            ],
                            rules: [{ required: true, message: '性别不能为空' }]
                        }, {
                            type: 'switch',
                            label: '是否同意',
                            prop: 'isAgree',
                            default: false, // 开关默认状态为 false，表示关闭
                            rules: [{ required: true, message: '请确认是否同意', trigger: 'change' }]
                        },
                        {
                            type: 'datetimepicker',
                            label: '预约时间',
                            prop: 'appointmentTime',
                            default: null, // 可以设置默认值，也可以不设置
                            placeholder: '请选择预约时间',
                            format: 'yyyy-MM-dd HH:mm:ss',
                            valueFormat: 'yyyy-MM-dd HH:mm:ss',
                            dateTimePickerType: 'datetime', // 可以是 'date' | 'datetime' | 'year' | 'month' | 'time' 等
                            rules: [
                                { required: true, message: '预约时间不能为空', trigger: 'change' }
                            ]
                        },
                        {
                            type: 'number', // 新增的数字输入框类型
                            label: '数量',
                            prop: 'quantity',
                            min: 1, // 最小值
                            max: 100, // 最大值
                            step: 1, // 步长
                            placeholder: '请输入数量', // 占位符
                            default: 1, // 默认值
                            rules: [{ required: true, message: '数量不能为空', trigger: 'blur' },
                            { type: 'number', message: '数量必须为数字', trigger: 'blur' }]
                        },
                        {
                            type: 'radio',
                            label: '爱好',
                            prop: 'hobby', default: undefined, // 单选默认值可以设置为 undefined 或第一个选项的值
                            options: [
                                { label: '足球', value: 'soccer' },
                                { label: '篮球', value: 'basketball' }
                                // 可以添加更多选项
                            ],
                            rules: [{ required: true, message: '请选择爱好', trigger: 'change' }]
                        },
                        {
                            type: 'checkbox',
                            label: '技能',
                            prop: 'skills', default: [], // 多选默认值应为数组
                            options: [
                                { label: '编程', value: 'coding' },
                                { label: '设计', value: 'design' },
                                { label: '测试', value: 'test' },
                                { label: '部署', value: 'uat' },
                            ],
                            rules: [{ required: true, message: '请选择至少一个技能', trigger: 'change' }]
                        }
                    ],
                }
            },
            created() {
                // this.initForm();
                // Local.set("name", "李先生");
                // Local.set("pass", "123456789");
                // Local.set("address", "福建省厦门市");
                // Local.set("phone", "18050768869");
                // Local.set("sex", "男");
                // this.storage.set("kkkk", "tttttttt");
            },
            // computed: {
            //     formRules() {
            //         const rules = {};
            //         this.formJson.forEach(item => {
            //             rules[item.prop] = item.rules || [];
            //         });
            //         return rules;
            //     }
            // },
            methods: {
                handleClose(e) {
                    this.dialogVisible = e;
                },
                submitForm(data) {
                    console.log("==================================", data)
                    // this.$refs["formRef"].validate((valid) => {
                    //     if (valid) {
                    //         console.log("==================================", this.form)
                    //         this.dialogVisible = false;
                    //         // axios.post("@("/jobsave")", this.form).then(function (res) {
                    //         //     if (res.data.code == 200) {
                    //         //         ELEMENT.MessageBox.alert(res.data.message, "系统信息", {
                    //         //             type: 'success', callback: () => {
                    //         //                 that.OnLoadJobs(); that.dialogForm = that.dialogInitForm; that.dialogFormVisible = false;
                    //         //             }
                    //         //         });
                    //         //     } else {
                    //         //         ELEMENT.MessageBox.alert(res.data.message, "系统信息", { type: 'info', callback: () => { } });
                    //         //     }
                    //         // });
                    //     }
                    // });
                },
                loadData(index, row) {
                    var that = this;
                    that.dialogVisible = true;
                    that.formData = {};
                    // that.dialogVisible = !that.dialogVisible;

                    if (that.dialogVisible) {
                        that.formData = {
                            "name": "sadsadsa",
                            "gender": "male",
                            "isAgree": true,
                            "appointmentTime": "2024-08-19 18:49:23",
                            "quantity": 1,
                            "hobby": "soccer",
                            "skills": [
                                "design",
                                "test"
                            ]
                        };
                    }
                    else {
                        that.formData = {
                            "name": "没有名称",
                            "gender": "female",
                            "hobby": "soccer",
                            "skills": ["coding", "test"]
                        };
                    }
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                    }, 1000);
                    // axios("@("/" + JobRootUrl + "/getjob/")" + row.id).then(function (res) { if (res.data.code == 200) { that.dialogForm = res.data.data; } });
                },

                view() {
                    this.dialogVisible = true;
                    this.footerVisible = false;
                },
            },
            filters: {

            }
        });



    </script>
</body>
</>
